<!DOCTYPE HTML>
<!--
	Hyperspace by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>注册页面 - 浪海博客</title>
		<meta charset="utf-8" />
		<meta name="keywords" content="浪海博客,注册页面" />
		<meta name="description" content="浪海博客的注册页面。" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="/blogs/assets/css/main.css" />
		<noscript><link rel="stylesheet" href="/blogs/assets/css/noscript.css" /></noscript>
	</head>
	<body class="is-preload">

		<!-- Header -->
			<header id="header">
				<a href="/" class="title">浪海博客</a>
				<nav>
					<ul>
						<li><a href="/">主页</a></li>
					</ul>
				</nav>
			</header>

		<!-- Wrapper -->
			<div id="wrapper">
				<!-- Main -->
					<section id="main" class="wrapper">
						<div class="inner">
							<h1 class="major">注册页面（暂时禁止注册）</h1>
							<div class="split style1">
								<section>
									<form id="registerForm">
										<div class="fields">
											<div class="field half">
												<label for="username">用户名（3到8位的数字和字母组合）</label>
												<input type="text" id="username" name="username" placeholder="用户名" required="required"   />
											</div>
											<div class="field half">
												<label for="password">用户密码（6到18位的字符组合）</label>
												<input type="password" id="password" name="password" placeholder="用户密码" required="required"   />
											</div>
										</div>
										<div class="fields">
											<div class="field half">
												<label for="nickname">昵称（1到12位的字符组合）</label>
												<input type="text" id="nickname" name="nickname" placeholder="昵称" required="required" />
											</div>
											<div class="field half">
												<label for="email">邮箱地址（与账户进行绑定）</label>
												<input type="text" id="email" name="email" placeholder="邮箱地址" required="required" />
											</div>
										</div>
										<div class="fields">
											<div class="field">
												<p id="vCodeStatus"></p>
												<input type="text" id="verifyCodeText" name="verifyCodeText" placeholder="验证码" required="required" />
											</div>
										</div>
									</form>
									<button id="registerVerify">注册</button>
									<button id="reset">重置</button>
									<button id="sendVerifyCode">获取验证码</button>
								</section>
								<section>
									<ul class="contact">
										<li>
											<a href="/user/loginPage">已有账号，点击进行登录！！！</a>
										</li>
										<li>
											欢迎使用浪海博客
										</li>
										<li>
											规范网络发言 杜绝绝对自由
										</li>
										<li>
											请妥善保管账户信息，避免泄露。
										</li>
									</ul>
								</section>
							</div>
						</div>
					</section>
			</div>

		<!-- Footer -->
			<footer id="footer" class="wrapper alt">
				<div class="inner">
					<ul class="menu">
						<li>&copy; <a href="http://www.langhai.cc">浪海博客</a>. All rights reserved.</li><li>个人网站 2021 ~ 2029年</li>
						<li><a href="https://gitee.com/langhai666/langhai-blog" target="_blank" >gitee</a></li></li>
						<li><a href="https://github.com/Allenkuzma/langhaiblogs" target="_blank" >github</a></li></li>
					</ul>
				</div>
			</footer>

		<!-- Scripts -->
			<script src="/blogs/assets/js/jquery.min.js"></script>
			<script src="/blogs/assets/js/jquery.scrollex.min.js"></script>
			<script src="/blogs/assets/js/jquery.scrolly.min.js"></script>
			<script src="/blogs/assets/js/browser.min.js"></script>
			<script src="/blogs/assets/js/breakpoints.min.js"></script>
			<script src="/blogs/assets/js/util.js"></script>
			<script src="/blogs/assets/js/main.js"></script>

	</body>
	<script>
		$(function(){
			// 发送邮箱验证码
			$("#sendVerifyCode").click(function () {
				var reg = new RegExp(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/);
				var flag = reg.test($("#email").val());
				if (flag == false) {
					$("#vCodeStatus").html("邮箱格式不正确");
				} else {
					$.ajax({
						url: "/user/sendEmailCode",
						async: true,
						type: "POST",
						data: {
							email : $("#email").val()
						},
						success: function (data) {
							$("#vCodeStatus").html(data.message);
						}
					})
				}
			})

			// 注册校验
			$("#registerVerify").click(function () {
				$.ajax({
					url: "/user/register",
					async: true,
					type: "POST",
					data: $('#registerForm').serialize(),
					success: function (data) {
						if(data.code == 200) {
							$("#vCodeStatus").html("注册成功，3秒后为你进行自动登录。");
							setTimeout(function() {
								window.location.href = "/";
							}, 3000);
						} else {
							$("#vCodeStatus").html(data.message);
						}
					}
				})
			})

			// 清空表单数据
			$("#reset").click(function () {
				$("#registerForm")[0].reset();
			})

			// 验证码刷新
			$("#verifyCode").click(function (){
				$("#verifyCode").attr("src", "/user/verifyCode?" + new Date().getTime());
			})

			// 用户名唯一校验
			$("#username").blur(function () {
				$.ajax({
					url: "/user/verifyUsername",
					async: true,
					type: "POST",
					data: {
						username : $("#username").val()
					},
					success: function (data) {
						$("#vCodeStatus").html(data.message);
					}
				})
			})

		})
	</script>
</html>